<template>
	<view class="container">
		<uni-nav-bar @clickLeft="clickLeft" @clickRight="clickRight" fixed="true" left-icon="arrowleft" right-icon="contact" title="搜索" background-color="#d44439" color="white"></uni-nav-bar>
		<inputSouSuo @sousuo="sousuo" @sousuo2="sousuo2" @clear="clear" :searchWord="searchWord" :historysitem="historysitem"></inputSouSuo>
		<SouSuoList v-show="ChuXian" :container="container" :songs="songs" @jilv="jilv"></SouSuoList>
		<history v-show="ChuXian2" :history="history" @del="del" @historys="historys"></history>
		<hot v-show="ChuXian3" @into="into"></hot>
	</view>
</template>

<script>
	import {search} from '../../api/SouSuo/SouSuo.js'
	import _ from 'lodash'
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import inputSouSuo from '../../components/inputSouSuo/inputSouSuo.vue'
	import history from '../../components/history/history.vue'
	import hot from '../../components/hot/hot.vue'
	import SouSuoList from '../../components/SouSuoList/SouSuoList.vue'
	export default {
		onLoad() {
			if(this.history === []){
				this.ChuXian2 = false
			}
		},
		components:{
			uniNavBar,
			inputSouSuo,
			history,
			hot,
			SouSuoList
		},
		data() {
			return {
				ChuXian:false,
				ChuXian2:true,
				ChuXian3:true,
				container:'',
				songs:[],
				history:[],
				searchWord:'',
				historysitem:''
			}
		},
		methods:{
			clickRight(){
				uni.navigateTo({
					url:'../GeShou/GeShou'
				})
			},
			clickLeft(){
				uni.navigateBack({
				    delta: 1
				})
			},
			clear(){
				this.ChuXian = false
				this.ChuXian2 = true
				this.ChuXian3 = true
			},
			jilv(name,id){
				this.history.push(name)
				uni.navigateTo({
					url:'../BoFangQi/BoFangQi?id=' + id
				})
			},
			del(){
				this.history.splice(0,this.history.length);
				this.ChuXian2 = false
			},
			into(searchWord){
				this.ChuXian2 = true
				this.history.push(searchWord)
				this.searchWord = searchWord
			},
			historys(item){
				this.historysitem = item
				//console.log(item)
			},
			sousuo2(){
				this.ChuXian = false
				this.ChuXian2 = true
				this.ChuXian3 = true
			},
			sousuo: _.debounce(function(container){
				this.ChuXian = true
				this.ChuXian2 = false
				this.ChuXian3 = false
				this.container = container
				search({keywords:container}).then(res => {
					this.songs = res.result.songs
				})
			},800)
		}
	}
</script>

<style lang="scss">
	.container{
		width: 750rpx;
	}
</style>
